<template>
  <div ref="mapContainer" class="map-webgl-tile"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import { fromLonLat } from 'ol/proj'
import WebGLTileLayer from 'ol/layer/WebGLTile'
import TileImage from 'ol/source/TileImage'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

const mapContainer = ref<HTMLDivElement | null>(null)
let map: Map | null = null

onMounted(() => {
  const gaodeLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
      // attributions: '© 高德地图'
      attributions: '自定义描述 © 2024 MyCompany - 数据来源：高德地图'
    })
  })

  map = new Map({
    target: mapContainer.value as HTMLDivElement,
    layers: [gaodeLayer],
    view: new View({
      center: fromLonLat([116.397, 39.917]),
      zoom: 10,
      minZoom: 3,
      maxZoom: 18
    })
  })
})

onBeforeUnmount(() => {
  if (map) {
    map.setTarget(undefined)
    map = null
  }
})
</script>

<script lang="ts">
export default {
  name: 'WebGLTileMap'
}
</script>

<style scoped>
.map-webgl-tile {
  width: 100%;
  height: 100%;
  background: #222;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
</style> 